<template>
  <div class="scan-config-page">
    <group v-if="list.length">
      <cell v-if="item.unbind !== true"  :key="index" v-for="(item, index) in this.list" :title="item.poster_name + '（ID: ' +item.poster_id+ '）' ">
        <span slot="value" class="sq-trigger" @click="confirmUnbind(item)">解绑</span>
      </cell>
    </group>
    <div class="no-data-tip" v-if="!list.length">您还未绑定海报，赶紧来<router-link class="is-link" :to="{name: 'bind-poster', query:{ type: type }}">绑定海报</router-link></div>
    <x-dialog v-model="this.$store.state.app.dialogShow" >
      <div class="dialog-message">
        {{ this.$store.state.app.dialogMessage }}
      </div>
      <span class="vux-close" @click="hideDialog">知道了</span>
    </x-dialog>
    <confirm v-model="show"
        title="解除绑定"
        @on-cancel="onCancel"
        @on-confirm="onConfirm"
        @on-show="onShow"
        @on-hide="onHide">
      <p style="text-align:center;">你确定要解除绑定吗?</p>
    </confirm>
  </div>
</template>
<style lang="less">
  @import "../less/scan-code-config";
</style>
<script>
  // import { Cell, Group, XDialog, Confirm } from 'vux'
  import Group from 'vux/src/components/group'
  import Cell from 'vux/src/components/cell'
  import XDialog from 'vux/src/components/x-dialog'
  import Confirm from 'vux/src/components/confirm'

  import { mapActions } from 'vuex'
  import {showDialog, hideDialog} from '../lib/dialog'

  export default {
    data () {
      return {
        list: [],
        show: false,
        unbindItem: null,
        type: 0
      }
    },
    mounted () {
      if (this.$route.query.type) {
        this.type = this.$route.query.type
      }
      this.initPosters()
      this.initBindButton()
      this.callJsApi('biz.navigation.setTitle', { title: '我的海报' })
    },

    components: {
      Cell,
      Group,
      XDialog,
      Confirm
    },

    methods: {
      hideDialog: hideDialog,
      onShow () {
      },
      onHide () {
      },
      onCancel () {
      },
      onConfirm () {
        this.unbind(this.unbindItem)
      },
      confirmUnbind (item) {
        this.unbindItem = item
        this.show = true
      },
      initPosters () {
        this.$vux.loading.show({text: '加载中...'})
        this.getPosters({ type: this.type }).then((response) => {
          if (response.data.errcode === 0) {
            this.list = response.data.results
          }
          this.$vux.loading.hide()
        }).catch((error) => {
          this.$vux.loading.hide()
          console.log(error)
        })
      },
      initBindButton () {
        let options = {
          textColor: '#0089cd',
          items: [
            {
              'id': 'bind_poster', // 字符串
              'text': '绑定'
            }
          ]
        }
        // let target = {path: 'edit-task', query: {type: 'add'}}
        // this.callJsApi('biz.navigation.setMenu', options)
        //   .then((data) => {
        //     if (data.id === 'bind_poster') {
        //       this.$router.push({ name: 'bind-poster', query: { type: this.type } })
        //     }
        //     // this.$router.push(target)
        //   })
      },
      unbind (item) {
        this.$vux.loading.show({text: '解绑中...'})
        this.unBindPoster(item.id).then((response) => {
          this.$vux.loading.hide()
          if (response.data.errcode === 0) {
            item.unbind = true
          } else {
            item.unbind = false
          }
          showDialog(response.data.errmsg)
          setTimeout(() => { hideDialog() }, 4000)
        }).catch((err) => {
          this.$vux.loading.hide()
          showDialog('系统出错...请联系管理员!')
          setTimeout(() => { hideDialog() }, 4000)
          console.log(err)
        })
      },
      ...mapActions({
        getPosters: 'getPosters',
        unBindPoster: 'unBindPoster'
      })
    }
  }
</script>
